<template>
  <view class="container">
    <view class="form-group">
      <input v-model="form.tenantName" placeholder="请输入姓名" />
    </view>

    <view class="form-group">
      <input v-model="form.phone" placeholder="请输入联系电话" type="number" />
    </view>

    <view class="form-group">
      <input v-model="form.idCard" placeholder="请输入身份证号码" />
    </view>

    <button @click="submit">提交预约</button>
  </view>
</template>

<script>
import { info } from 'console';
import { addInfo } from '@/api/reserve';

export default {
  data() {
    return {
      tenantName: '',
      phone: '',
      idCard: '',
      houseId: null
    };
  },
  onLoad(options) {
    this.houseId = options.id; // 获取房屋ID
  },
  methods: {
    async handleSubmit(e) {
      try {
        const res = await submitReservation({
          houseId: this.houseId,
          tenantName: this.tenantName,
          phone: this.phone,
          idCard: this.idCard
        });

        if (res && res.code !== undefined) {
          if (res.code === 200) {
            uni.showToast({
              title: '预约成功',
              icon: 'none',});
              setTimeout(() => {
                uni.navigateBack({
                  success: () => {
                    const pages = getCurrentPages();
                    const prevPage = pages[pages.length - 4];
                    if (prevPage && typeof prevPage.fetchHouses === 'function') {
                      prevPage.fetchHouses(); // 调用列表页的刷新方法
                    }
                  }
                });
            },3000);
          } else {
            uni.showToast({
              title: res.msg || '预约失败',
              icon: 'none'
            });
          }
        } else {
          console.error('响应数据格式异常或请求失败', res);
          uni.showToast({
            title: '预约失败，响应异常',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('预约请求失败:', error);
        uni.showToast({
          title: '网络异常，请重试',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 40rpx;
}

.form-group input {
  border: 1rpx solid #ccc;
  padding: 20rpx;
  margin-bottom: 40rpx;
  border-radius: 8rpx;
}
</style>